<script lang="ts">
import { defineComponent, ref, watch, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { getSelection } from '../api/home'
import { viewCount, filters, vidotime } from '../hooks/filters'
import { getimage } from '../hooks/image'
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../stores/home'
import { useScrollStore } from '../stores/scroll'
import { showToast } from 'vant'
import { getVideo } from '../api/videodes'

export default defineComponent({
  components: {},
  setup() {
    let router = useRouter();
    let active = ref(null);

    const store = useCounterStore();

    const { idarr, likearr, collectlikearr } = storeToRefs(store)
    // 作为 action 的 increment 可以直接解构
    const { increment, incrementfalse, unlikeFuns, likeFuns, collectFuns, uncollectFuns } = store;

    const storeScroll = useScrollStore();
    const { scrollIndex, videoList } = storeToRefs(storeScroll);
    const { changeIndex } = storeScroll;
    const { tocked, userInfoheard } = storeToRefs(store)
    const { getUserInfoFun } = store;
    let scrollTop = ref<number>(document.documentElement.scrollTop);
    let currentIndex = ref<number>(0);

    let istoken = localStorage.getItem('token') != null;
    console.log('istoken=>', istoken)


    let onscroll = () => {
      scrollTop.value = document.documentElement.scrollTop;
      currentIndex.value = Math.round((scrollTop.value - 38) / 332);
      changeIndex(currentIndex.value, 38);
      let videodom = document.querySelectorAll('.ispause');
      // console.log('22222222222222222222222222', videodom);
      videodom.forEach((item: any) => {
        item.pause();
      })
      let playdom = document.querySelectorAll(".isplay");
      playdom.forEach((item: any) => {
        item.play();
      })
    }
    //挂载开启滚动事件
    onMounted(() => {
      // console.log('isReachBottom', isReachBottom.value)
      window.addEventListener('scroll', onscroll);
    })
    //销毁移出滚动事件
    onUnmounted(() => {
      window.removeEventListener('scroll', onscroll)
    })

    let everydaylist: any = ref([]);
    let everydaylisttitle: any = ref([]);
    let myvideojson: any = localStorage.getItem('myvideo');
    let myvideo: any = ref(JSON.parse(myvideojson) || []);
    console.log('myvideo=>', myvideo.value);
    //点击头像
    let click_user = (userid: number) => {
      router.push({
        path: '/userdetail',
        query: {
          userid: userid,
          active: 1
        }
      })
    };
    const showShare = ref(false);
    const options = [
      { name: '微信', icon: 'wechat' },
      { name: '微博', icon: 'weibo' },
      { name: '复制链接', icon: 'link' },
      { name: '分享海报', icon: 'poster' },
      { name: '二维码', icon: 'qrcode' },
    ];
    const onSelect = (option: any) => {
      showToast(option.name);
      showShare.value = false;
    };
    //点击视频
    let click_video = (videoid: any, video_library_id: any) => {
      router.push({
        path: '/videoDes',
        query: {
          aid: videoid,
          mid: video_library_id
        }
      })
    };
    //点击了自己的视频
    let click_myvideo = (myvideoid: number) => {
      router.push({
        path: '/myvideo',
        query: {
          videoid: myvideoid
        }
      }
      )
    }
    console.log(active);
    let videolisturl: any = ref([]);
    let getVideoUrl: any = (videoid: number) => {
      getVideo(videoid).then((data) => {
        videolisturl.value.push(data.data.video.content.progressive[0].url)
      });

    }
    //获取每日精选数据
    let getSelectionFun = () => {
      getSelection().then((data) => {
        console.log('每日精选数据=>', data)
        everydaylist.value = data.data.children.filter((item: any, index: number) => {
          return index > 0
        })
        everydaylisttitle.value = data.data.children[0]
        console.log('每日精选数据=>everydaylist', everydaylist)
        console.log('每日精选数据=>everydaylisttitle', everydaylisttitle)

        everydaylist.value.forEach((item: any) => {
          getVideoUrl(item.children[0].model.resource.id)
        })
      })
    };

    // // 点击喜欢
    let likeFun = (id: any) => {
      likeFuns(id)

    }
    // 取消喜欢
    let unlikeFun = (id: any) => {
      unlikeFuns(id)
    }
    // 关注部分开始
    // 点击关注
    let attentiontaggtrue: any = (id: any) => {
      increment(id);
    }
    // 取消关注
    let attentiontaggfalse: any = (id: any) => {
      incrementfalse(id);
    };
    // let videodom = document.querySelectorAll('.isplay');
    // console.log('22222222222222222222222222', videodom);
    // videodom.filter((item: any) => {

    // })
    // 关注部分结束

    // 判断是否是vip
    let localvip = JSON.parse(window.localStorage.getItem("vip"))

    let isvip: any = ref(localvip || {});
    let attebtionarr: any = window.localStorage.getItem('idarr');
    idarr.value = JSON.parse(attebtionarr) || [];
    let myvideocomment = JSON.parse(localStorage.getItem('myvideocomment'))
    myvideocomment = ref(myvideocomment||[]);
    onMounted(() => {
      getSelectionFun();
      getUserInfoFun();
      console.log(idarr);

    });

    return {
      active,
      click_user,
      click_video,
      everydaylisttitle,
      everydaylist,
      vidotime,
      viewCount,
      getimage,
      myvideo,
      click_myvideo,
      idarr,
      attentiontaggtrue,
      attentiontaggfalse,
      likeFun,
      unlikeFun,
      likearr,
      collectlikearr,
      collectFuns,
      uncollectFuns,
      options,
      showShare,
      onSelect,

      scrollIndex,
      getVideoUrl,
      videoList,
      videolisturl,
      onscroll,
      scrollTop,
      userInfoheard,
      istoken,
      isvip,
      myvideocomment
    }
  }
})
</script>


<template>
  <van-loading size="24px" v-if="everydaylist == undefined"
    style="text-align: center;line-height:40px;">加载中...</van-loading>
  <main @scroll="onscroll" v-else>
    <h1>今日精选</h1>
    <!-- <video src="https://us-xpc5.xpccdn.com/a7e480cb-c55b-4530-8070-6f88ebb14a0d/e0646cb4-3a86-4da8-8750-0a94f38aeb26.mp4" controls></video> -->
    <div class="video_list myvideo" v-if="myvideo && istoken">
      <ul>
        <li v-for="(item, index) in myvideo" @click.stop="click_myvideo(item.videoid)">
          <div class="content">
            <!-- 发布用户信息 -->
            <div class="user">
              <div class="uer_left">
                <div class="user_image" @click="click_user(userInfoheard.id)">
                  <!-- <img src="../assets/images/swiper1.webp" /> -->
                  <img :src="userInfoheard.avatar" />
                </div>
                <div class="user_name">
                  {{ userInfoheard.username }}
                  <span class="iconfont icon-VIP1" v-if="isvip.Vip == 1"></span>
                  <span class="iconfont icon-VIP1" style="color:gold" v-if="isvip.Vip == 2"></span>
                  <span v-if="item.team">和其他<em>{{ item.children[0].model.resource.team.length }}</em> 人</span>
                </div>
              </div>
              <!-- <div class="user_right">
                                    <div class="addfollow" v-if="false">+ 关注</div>
                                    <div class="logo"><span class="iconfont icon-gengduo"></span></div>
                                  </div> -->
              <!-- <div class="user_right">
                                    <div class="addfollow" @click.stop="attentiontaggtrue(item.children[0].model.resource.author.userinfo.id)"
                                      v-if="!idarr.includes(item.children[0].model.resource.author.userinfo.id)">+ 关注</div>
                                    <div class="addfollow"
                                      @click.stop="attentiontaggfalse(item.children[0].model.resource.author.userinfo.id)" v-else>已关注
                                    </div>
                                    <div class="logo"><span class="iconfont icon-gengduo"></span></div>
                                  </div> -->
            </div>
            <div class="word">{{ item.title }}</div>
            <div class="video" v-show="scrollTop < 150">
              <!-- <img :src="item.avator" /> -->
              <video :src="item.data.content" controls autoplay muted></video>
              <!-- <img src="../assets/images/swiper1.webp" /> -->
              <div class="mask">
                <!-- {{ viewCount(item.count.count_view) }}观看 | -->
                <!-- {{ vidotime(item.duration) }} -->
              </div>

            </div>
            <div class="video" v-show="scrollTop >= 150">
              <img :src="item.avator" />
              <!-- <img src="../assets/images/swiper1.webp" /> -->
              <div class="mask">{{ 0 }}观看 |
                0'32'' </div>
            </div>
            <div class="bottom">
              <ul>
                <!-- 收藏 -->
                <li @click.stop="collectFuns(item.videoid)" v-if="!collectlikearr.includes(item.videoid) || !istoken"><span
                    class="iconfont icon-31shoucang"></span>{{
                      viewCount(0) }}
                </li>
                <li @click.stop="uncollectFuns(item.videoid)" v-else><span class="iconfont icon-wodeshoucang"
                    style="color: yellow"></span>{{
                      viewCount(0 + 1) }}
                </li>
                <!-- 评论 -->
                <li><span class="iconfont icon-review"></span>{{
                  viewCount(myvideocomment.length) }}
                </li>
                <!-- 喜欢 -->
                <li @click.stop="likeFun(item.videoid)" v-if="!likearr.includes(item.videoid) || !istoken"><span
                    class="iconfont icon-dianzan"></span>{{
                      viewCount(0) }}
                </li>
                <li @click.stop="unlikeFun(item.videoid)" v-else><span class="iconfont icon-dianzan_kuai "
                    style="color: red;font-size: 19px;"></span>{{
                      viewCount(0 + 1) }}</li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </div>

    <!-- 编辑精选列表 -->
    <div class="video_list" v-if="everydaylist">
      <div style="position: absolute; height: 100vh;">
        <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select.stop="onSelect"
          z-index="6666" />

      </div>
      <ul>
        <li
          @click.stop="click_video(item.children[0].model.resource.id, item.children[0].model.resource.video_library_id)"
          v-for="(item, index) in everydaylist" :key="item.id">
          <div class="content">
            <!-- 发布用户信息 -->
            <div class="user">
              <div class="uer_left">
                <div class="user_image" @click.stop="click_user(item.children[0].model.resource.author.userinfo.id)">
                  <!-- <img src="../assets/images/swiper1.webp" /> -->
                  <img :src="getimage(item.children[0].model.resource.author.userinfo.avatar)" />
                  <div class="smallimage" v-if="item.children[0].model.resource.author.userinfo.vip_flag == 1"
                    style="background-color: #fff;">
                    <img src="../assets/images/177会员、vip.png" />
                  </div>
                </div>
                <div class="user_name">
                  {{ item.children[0].model.resource.author.userinfo.username }}
                  <span class="iconfont icon-VIP1" v-if="item.children[0].model.resource.author.userinfo.vip_flag == 1"
                    style="color: #e73f29;font-size:14px"></span>
                  <span v-if="item.children[0].model.resource.team.length != 0">和其他<em>{{
                    item.children[0].model.resource.team.length }}</em>
                    人</span>
                </div>
              </div>
              <div class="user_right">
                <div class="addfollow" @click.stop="attentiontaggtrue(item.children[0].model.resource.author.userinfo.id)"
                  v-if="!idarr.includes(item.children[0].model.resource.author.userinfo.id) || !istoken">+ 关注</div>
                <div class="addfollow"
                  @click.stop="attentiontaggfalse(item.children[0].model.resource.author.userinfo.id)" v-else>已关注
                </div>
                <van-cell class="iconfont icon-Androidgengduo" @click.stop="showShare = true" />
                <!-- <div class="logo"><span class="iconfont icon-gengduo"></span></div> -->
                <!-- </van-cell> -->

              </div>
            </div>
            <div class="word">{{ item.children[0].model.resource.title }}</div>
            <div class='video' v-show="index + myvideo.length == scrollIndex" style=" background: #000;">
              <video :src="videolisturl[index]" controls muted autoplay
                :class="['video', index + myvideo.length != scrollIndex ? 'ispause' : '', index + myvideo.length == scrollIndex ? 'isplay' : '']"></video>
              <!-- <video :src="getVideoUrl(12343575).video.content.progressive[0].url" controls muted autoplay></video> -->
            </div>
            <div class='video' v-show="index + myvideo.length != scrollIndex">
              <img :src="getimage(item.children[0].model.resource.cover)" />
              <!-- <img src="../assets/images/swiper1.webp" /> -->
              <div class="mask">{{ viewCount(item.children[0].model.resource.count.count_view) }}观看 |
                {{ vidotime(item.children[0].model.resource.duration) }}</div>
            </div>
            <div class="bottom">
              <ul>
                <!-- 收藏 -->
                <li @click.stop="collectFuns(item.children[0].model.resource.id)"
                  v-if="!collectlikearr.includes(item.children[0].model.resource.id) || !istoken"><span
                    class="iconfont icon-31shoucang"></span>{{
                      viewCount(item.children[0].model.resource.count.count_collect) }}
                </li>
                <li @click.stop="uncollectFuns(item.children[0].model.resource.id)" v-else><span
                    class="iconfont icon-wodeshoucang" style="color: yellow"></span>{{
                      viewCount(item.children[0].model.resource.count.count_collect + 1) }}
                </li>
                <!-- 评论 -->
                <li><span class="iconfont icon-review"></span>{{
                  viewCount(item.children[0].model.resource.count.count_comment) }}
                </li>
                <!-- 喜欢 -->
                <li @click.stop="likeFun(item.children[0].model.resource.id)"
                  v-if="!likearr.includes(item.children[0].model.resource.id) || !istoken"><span
                    class="iconfont icon-dianzan"></span>{{
                      viewCount(item.children[0].model.resource.count.count_like) }}
                </li>
                <li @click.stop="unlikeFun(item.children[0].model.resource.id)" v-else><span
                    class="iconfont icon-dianzan_kuai " style="color: red;font-size: 19px;"></span>{{
                      viewCount(item.children[0].model.resource.count.count_like + 1) }}</li>
              </ul>
            </div>
            <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
          </div>
        </li>
      </ul>

    </div>


  </main>
</template>
<style lang="scss" scoped>
::v-deep .van-cell {
  padding: 0;
  width: 20px;
}

::v-deep .van-popup {
  z-index: 666666;
  position: absolute !important;
  top: 36vh !important;
}

main {
  padding: 0 11px;
  background-color: #f7f7f7;
  padding-top: 12px;
}

h1 {
  font-size: 17px;
  line-height: 37px;
}

.video_list {
  position: relative;

  &>ul {
    &>li {
      background-color: #fff;
      width: 100%;
      // height: 320px;
      border-radius: 10px;
      margin-bottom: 12px;
      border-top: 0.1px solid transparent;

      .content {
        .user {
          padding: 0 12px;
          margin-top: 12px;
          display: flex;
          justify-content: space-between;

          .uer_left {
            display: flex;

            .user_image {
              margin-right: 5px;
              position: relative;

              img {
                border-radius: 50%;
                width: 32px;
                height: 32px;
              }

              .smallimage {
                position: absolute;
                top: 20px;
                right: -3px;
                width: 13px;
                height: 13px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgb(255, 255, 255);
                border-radius: 50%;

                img {
                  width: 13px;
                  height: 13px;
                  border-radius: 50%;
                }
              }
            }

            .user_name {
              font-size: 12px;
              color: #484848;
              line-height: 32px;

              span {
                color: #767676;

                em {
                  color: #1c1c1c;
                  font-weight: 600;
                  font-style: normal;
                  margin-left: 4px;
                }
              }
            }
          }

          .user_right {
            display: flex;

            .addfollow {
              color: #eb4b3a;
              font-size: 12px;
              margin-right: 13px;
              font-weight: 600;
              line-height: 27px;
            }

            .logo {
              span {
                color: #8a8a8a;
              }
            }
          }
        }

        .word {
          padding: 0 12px;
          font-size: 14px;
          color: #282828;
          font-weight: 600;
          line-height: 31px;
        }

        .video {
          position: relative;
          height: 203px;
          display: flex;
          align-items: center;

          video {
            width: 100%;
            height: 100%;
          }

          img {
            width: 100%;
            height: 199px;
            display: flex;
          }

          .mask {
            position: absolute;
            bottom: 0;
            right: 0;
            color: #fff;
            font-size: 12px;
            margin-right: 12px;
            line-height: 30px;
          }
        }

        .bottom {
          &>ul {
            display: flex;
            align-items: center;

            &>li {
              width: 33.33%;
              text-align: center;
              line-height: 44px;
              font-size: 12px;
              display: flex;
              align-items: center;
              justify-content: center;

              span {
                margin-right: 7px;
                font-size: 20px;
                color: #6a6869;
              }
            }
          }
        }
      }
    }
  }
}
</style>